<!DOCTYPE html><html><head><title>Web前端开发高级工程师</title><meta charset='utf-8'><link href='https://cdn.maxiang.io/res-min/themes/marxico.css' rel='stylesheet'><style>
.note-content  {font-family: 'Helvetica Neue', Arial, 'Hiragino Sans GB', STHeiti, 'Microsoft YaHei', 'WenQuanYi Micro Hei', SimSun, Song, sans-serif;}

</style></head><body><div id='preview-contents' class='note-content'>
                        
                    



<h2 id="web前端开发高级工程师">Web前端开发高级工程师</h2>

<pre class="prettyprint hljs-dark"><code class="language-text hljs"><div class="hljs-line">《诫子书》 夫君子之行，静以修身，俭以养德。非淡泊无以明志，非宁静无以致远。夫学须静也，才须学也，非学无以广才，非志无以成学。淫慢则不能励精，险躁则不能治性。年与时驰，意与日去，遂成枯落，多不接世，悲守穷庐，将复何及！
</div></code></pre>

<h3 id="开班第一天的一些安排">开班第一天的一些安排</h3>

<blockquote>
  <p>上课时间：</p>
  
  <ul><li><p>周三/五晚上  20:00 ~ 22:00</p></li>
  <li><p>周日白天 9:30 ~ 18:00</p></li>
  </ul>
  
  <p>主讲老师：周老师  王老师 <br>
  助教老师：董老师</p>
</blockquote>

<p><strong>过年期间的课程安排</strong></p>

<p><img longdesc="./1577869526486.png" alt="Alt text" title="" type="image/png" src="" class=""></p>



<p><img longdesc="./1577869950450.png" alt="Alt text" title="" type="image/png" src="" class=""></p>

<p><strong>如何成为一名优秀的前端开发工程师</strong></p>



<p><img longdesc="./1577873927885.png" alt="Alt text" title="" type="image/png" src="" class=""></p>

<ul><li><p>知其然而知其所以然</p>

<ul>
<li><p>熟练扎实的基础知识（思维导图）</p></li>
<li><p>了解其底层运行机制</p></li>
<li><p>研究源码</p></li>
<li><p>尝试自己写开源内容</p></li></ul></li>
<li><p>温故而知新可以为师矣</p>

<ul>
<li><p>养成写笔记/写博客的习惯</p></li>
<li><p>养成项目总结的习惯</p></li>
<li><p>常复习和梳理</p></li>
<li><p>多看博客等</p></li></ul></li>
</ul>

<h3 id="js中的数据类型及堆栈内存">JS中的数据类型及堆栈内存</h3>



<h4 id="数据类型详细解读">数据类型详细解读</h4>

<ul><li><p>NaN / isNaN</p></li>
<li><p>数据类型转换</p></li>
<li><p>对象和数组</p></li>
</ul>



<h4 id="堆heap栈stack内存">堆(heap)栈(stack)内存</h4>

<pre class="prettyprint hljs-dark"><code class="language-javascript hljs"><div class="hljs-line"><span class="hljs-comment">/*百度面试题*/</span>
</div><div class="hljs-line"><span class="hljs-keyword">let</span> a = <span class="hljs-number">12</span>;
</div><div class="hljs-line"><span class="hljs-keyword">let</span> b = a;
</div><div class="hljs-line">b = <span class="hljs-number">13</span>;
</div><div class="hljs-line"><span class="hljs-built_in">console</span>.log(a);
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line"><span class="hljs-keyword">let</span> a = {<span class="hljs-attr">n</span>:<span class="hljs-number">12</span>};
</div><div class="hljs-line"><span class="hljs-keyword">let</span> b = a;
</div><div class="hljs-line">b[<span class="hljs-string">'n'</span>] = <span class="hljs-number">13</span>;
</div><div class="hljs-line"><span class="hljs-built_in">console</span>.log(a.n);
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line"><span class="hljs-keyword">let</span> a = {<span class="hljs-attr">n</span>:<span class="hljs-number">12</span>};
</div><div class="hljs-line"><span class="hljs-keyword">let</span> b = a;
</div><div class="hljs-line">b = {<span class="hljs-attr">n</span>:<span class="hljs-number">13</span>};
</div><div class="hljs-line"><span class="hljs-built_in">console</span>.log(a.n);
</div></code></pre>

<pre class="prettyprint hljs-dark"><code class="language-javascript hljs"><div class="hljs-line"><span class="hljs-comment">/*阿里面试题*/</span>
</div><div class="hljs-line"><span class="hljs-keyword">let</span> a = {
</div><div class="hljs-line">    <span class="hljs-attr">n</span>: <span class="hljs-number">10</span>
</div><div class="hljs-line">};
</div><div class="hljs-line"><span class="hljs-keyword">let</span> b = a;
</div><div class="hljs-line">b.m = b = {
</div><div class="hljs-line">    <span class="hljs-attr">n</span>: <span class="hljs-number">20</span>
</div><div class="hljs-line">};
</div><div class="hljs-line"><span class="hljs-built_in">console</span>.log(a);
</div><div class="hljs-line"><span class="hljs-built_in">console</span>.log(b);
</div></code></pre>

<pre class="prettyprint hljs-dark"><code class="language-javascript hljs"><div class="hljs-line"><span class="hljs-comment">/*360面试题*/</span>
</div><div class="hljs-line"><span class="hljs-keyword">let</span> x = [<span class="hljs-number">12</span>, <span class="hljs-number">23</span>];
</div><div class="hljs-line"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">fn</span>(<span class="hljs-params">y</span>) </span>{
</div><div class="hljs-line">    y[<span class="hljs-number">0</span>] = <span class="hljs-number">100</span>;
</div><div class="hljs-line">    y = [<span class="hljs-number">100</span>];
</div><div class="hljs-line">    y[<span class="hljs-number">1</span>] = <span class="hljs-number">200</span>;
</div><div class="hljs-line">    <span class="hljs-built_in">console</span>.log(y);
</div><div class="hljs-line">}
</div><div class="hljs-line">fn(x);
</div><div class="hljs-line"><span class="hljs-built_in">console</span>.log(x);
</div></code></pre>

<h3 id="govoaoec及作用域和执行上下文">GO/VO/AO/EC及作用域和执行上下文</h3>

<ul><li><p>GO：全局对象(Global Object)</p></li>
</ul>



<pre class="prettyprint hljs-dark"><code class="language-javascript hljs"><div class="hljs-line"><span class="hljs-keyword">let</span> globalObject = {
</div><div class="hljs-line">   <span class="hljs-attr">Math</span>:{},
</div><div class="hljs-line">   <span class="hljs-attr">String</span>:{},
</div><div class="hljs-line">   <span class="hljs-attr">document</span>:{},
</div><div class="hljs-line">   ...
</div><div class="hljs-line">   window:<span class="hljs-keyword">this</span>
</div><div class="hljs-line">}
</div></code></pre>

<ul><li><p>ECStack：Execution [ˌeksɪˈkjuːʃn] Context Stack 执行环境栈</p></li>
<li><p>EC：Execution Context 执行环境（执行上下文）</p>

<ul>
<li><p>VO：Varibale Object 变量对象</p></li>
<li><p>AO：Activation Object 活动对象 （函数的叫做AO，理解为VO的一个分支）</p></li></ul></li>
<li><p>Scope：作用域，创建的函数的时候就赋予的</p></li>
<li><p>Scope Chain ：作用域链</p></li>
</ul>

<p>例如：</p>

<pre class="prettyprint hljs-dark"><code class="language-javascript hljs"><div class="hljs-line"><span class="hljs-keyword">let</span> x = <span class="hljs-number">1</span>;
</div><div class="hljs-line"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">A</span>(<span class="hljs-params">y</span>)</span>{
</div><div class="hljs-line">   <span class="hljs-keyword">let</span> x = <span class="hljs-number">2</span>;
</div><div class="hljs-line">   <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">B</span>(<span class="hljs-params">z</span>)</span>{
</div><div class="hljs-line">       <span class="hljs-built_in">console</span>.log(x+y+z);
</div><div class="hljs-line">   }
</div><div class="hljs-line">   <span class="hljs-keyword">return</span> B;
</div><div class="hljs-line">}
</div><div class="hljs-line"><span class="hljs-keyword">let</span> C = A(<span class="hljs-number">2</span>);
</div><div class="hljs-line">C(<span class="hljs-number">3</span>);
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line"><span class="hljs-comment">/*第一步：创建全局执行上下文，并将其压入ECStack中*/</span>
</div><div class="hljs-line">ECStack = [
</div><div class="hljs-line">    <span class="hljs-comment">//=&gt;全局执行上下文</span>
</div><div class="hljs-line">    EC(G) = {
</div><div class="hljs-line">        <span class="hljs-comment">//=&gt;全局变量对象</span>
</div><div class="hljs-line">        VO(G):{
</div><div class="hljs-line">            ... <span class="hljs-comment">//=&gt;包含全局对象原有的属性</span>
</div><div class="hljs-line">            x = <span class="hljs-number">1</span>;
</div><div class="hljs-line">            A = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">y</span>)</span>{...};
</div><div class="hljs-line">            A[[scope]] = VO(G); <span class="hljs-comment">//=&gt;创建函数的时候就确定了其作用域</span>
</div><div class="hljs-line">        }
</div><div class="hljs-line">    }
</div><div class="hljs-line">];
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line"><span class="hljs-comment">/*第二步：执行函数A(2)*/</span>
</div><div class="hljs-line">ECStack = [
</div><div class="hljs-line">    <span class="hljs-comment">//=&gt;A的执行上下文</span>
</div><div class="hljs-line">    EC(A) = {
</div><div class="hljs-line">        <span class="hljs-comment">//=&gt;链表初始化为：AO(A)-&gt;VO(G)</span>
</div><div class="hljs-line">        [scope]:VO(G)
</div><div class="hljs-line">        scopeChain:&lt;AO(A),A[[scope]]&gt;
</div><div class="hljs-line">        //=&gt;创建函数A的活动对象
</div><div class="hljs-line">        AO(A) : {
</div><div class="hljs-line">            arguments:[0:2],
</div><div class="hljs-line">            y:2,
</div><div class="hljs-line">            x:2,
</div><div class="hljs-line">            B:function(z){...},
</div><div class="hljs-line">            B[[scope]] = AO(A);
</div><div class="hljs-line">            this:window;
</div><div class="hljs-line">        }
</div><div class="hljs-line">    },
</div><div class="hljs-line">    //=&gt;全局执行上下文
</div><div class="hljs-line">    EC(G) = {
</div><div class="hljs-line">        //=&gt;全局变量对象
</div><div class="hljs-line">        VO(G):{
</div><div class="hljs-line">            ... //=&gt;包含全局对象原有的属性
</div><div class="hljs-line">            x = 1;
</div><div class="hljs-line">            A = function(y){...};
</div><div class="hljs-line">            A[[scope]] = VO(G); //=&gt;创建函数的时候就确定了其作用域
</div><div class="hljs-line">        }
</div><div class="hljs-line">    }
</div><div class="hljs-line">];
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">/*第三步：执行B/C函数 C(3)*/
</div><div class="hljs-line">ECStack = [
</div><div class="hljs-line">    //=&gt;B的执行上下文
</div><div class="hljs-line">    EC(B){
</div><div class="hljs-line">        [scope]:AO(A)
</div><div class="hljs-line">        scopeChain:&lt;AO(B),AO(A),B[[scope]]
</div><div class="hljs-line">        //=&gt;创建函数B的活动对象
</div><div class="hljs-line">        AO(B):{
</div><div class="hljs-line">            arguments:[0:3],
</div><div class="hljs-line">            z:3,
</div><div class="hljs-line">            this:window;
</div><div class="hljs-line">        }
</div><div class="hljs-line">    },
</div><div class="hljs-line">    //=&gt;A的执行上下文
</div><div class="hljs-line">    EC(A) = {
</div><div class="hljs-line">        //=&gt;链表初始化为：AO(A)-&gt;VO(G)
</div><div class="hljs-line">        [scope]:VO(G)
</div><div class="hljs-line">        scopeChain:&lt;AO(A),A[[scope]]&gt;
</div><div class="hljs-line">        //=&gt;创建函数A的活动对象
</div><div class="hljs-line">        AO(A) : {
</div><div class="hljs-line">            arguments:[0:2],
</div><div class="hljs-line">            y:2,
</div><div class="hljs-line">            x:2,
</div><div class="hljs-line">            B:function(z){...},
</div><div class="hljs-line">            B[[scope]] = AO(A);
</div><div class="hljs-line">            this:window;
</div><div class="hljs-line">        }
</div><div class="hljs-line">    },
</div><div class="hljs-line">    //=&gt;全局执行上下文
</div><div class="hljs-line">    EC(G) = {
</div><div class="hljs-line">        //=&gt;全局变量对象
</div><div class="hljs-line">        VO(G):{
</div><div class="hljs-line">            ... //=&gt;包含全局对象原有的属性
</div><div class="hljs-line">            x = 1;
</div><div class="hljs-line">            A = function(y){...};
</div><div class="hljs-line">            A[[scope]] = VO(G); //=&gt;创建函数的时候就确定了其作用域
</div><div class="hljs-line">        }
</div><div class="hljs-line">    }
</div><div class="hljs-line">];
</div></code></pre>

<hr>

<pre class="prettyprint hljs-dark"><code class="language-javascript hljs"><div class="hljs-line"><span class="hljs-keyword">let</span> x = <span class="hljs-number">5</span>;
</div><div class="hljs-line"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">fn</span>(<span class="hljs-params">x</span>) </span>{
</div><div class="hljs-line">    <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">y</span>) </span>{
</div><div class="hljs-line">        <span class="hljs-built_in">console</span>.log(y + (++x));
</div><div class="hljs-line">    }
</div><div class="hljs-line">}
</div><div class="hljs-line"><span class="hljs-keyword">let</span> f = fn(<span class="hljs-number">6</span>);
</div><div class="hljs-line">f(<span class="hljs-number">7</span>);
</div><div class="hljs-line">fn(<span class="hljs-number">8</span>)(<span class="hljs-number">9</span>);
</div><div class="hljs-line">f(<span class="hljs-number">10</span>);
</div><div class="hljs-line"><span class="hljs-built_in">console</span>.log(x);
</div><div class="hljs-line"><span class="hljs-comment">//=&gt;如果去掉function fn(x)的x呢？</span>
</div></code></pre>

<pre class="prettyprint hljs-dark"><code class="language-javascript hljs"><div class="hljs-line"><span class="hljs-comment">/*阿里面试原题*/</span>
</div><div class="hljs-line"><span class="hljs-keyword">let</span> a=<span class="hljs-number">0</span>,
</div><div class="hljs-line">    b=<span class="hljs-number">0</span>;
</div><div class="hljs-line"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">A</span>(<span class="hljs-params">a</span>)</span>{
</div><div class="hljs-line">    A=<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">b</span>)</span>{
</div><div class="hljs-line">        alert(a+b++);
</div><div class="hljs-line">    };
</div><div class="hljs-line">    alert(a++);
</div><div class="hljs-line">}
</div><div class="hljs-line">A(<span class="hljs-number">1</span>);
</div><div class="hljs-line">A(<span class="hljs-number">2</span>);
</div></code></pre>

<p><strong>带var/function的特殊性 -&gt; 变量提升</strong></p>

<ul><li><p>let/const/var</p></li>
<li><p>函数表达式方式创建函数</p></li>
</ul>

<pre class="prettyprint hljs-dark"><code class="language-javascript hljs"><div class="hljs-line">fn();
</div><div class="hljs-line"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">fn</span>(<span class="hljs-params"></span>)</span>{ <span class="hljs-built_in">console</span>.log(<span class="hljs-number">1</span>); }
</div><div class="hljs-line">fn();
</div><div class="hljs-line"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">fn</span>(<span class="hljs-params"></span>)</span>{ <span class="hljs-built_in">console</span>.log(<span class="hljs-number">2</span>); }
</div><div class="hljs-line">fn();
</div><div class="hljs-line"><span class="hljs-keyword">var</span> fn = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{ <span class="hljs-built_in">console</span>.log(<span class="hljs-number">3</span>); }
</div><div class="hljs-line">fn();
</div><div class="hljs-line"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">fn</span>(<span class="hljs-params"></span>)</span>{ <span class="hljs-built_in">console</span>.log(<span class="hljs-number">4</span>); }
</div><div class="hljs-line">fn();
</div><div class="hljs-line"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">fn</span>(<span class="hljs-params"></span>)</span>{ <span class="hljs-built_in">console</span>.log(<span class="hljs-number">5</span>); }
</div><div class="hljs-line">fn();
</div></code></pre></div></body></html>